<template>
<div class="ct-jcinside">
  <div class="jcide-title">
    <div class="tit-le">
      <i @click="goback" class="iconfont icon-arrow-right"></i>
    </div>
    <div class="tit-rg">
      <span>教程详情</span>
    </div>
  </div>
  <div class="jcide-msg">
    <div class="msg-user">
      <div class="u-le">
        <img :src="tutorial.user.uportrait" alt="" @click="gouindex">
        <div class="le-rg">
          <div class="rg-box">
            <span>{{ tutorial.user.username }}</span>
            <i v-show="tutorial.user.sex == '女'" class="iconfont icon-nv"></i>
            <i v-show="tutorial.user.sex == '男'" class="iconfont icon-nan"></i>
          </div>
          <span>{{ tutorial.user.role }}</span>
        </div>
      </div>
      <div class="u-rg">
        <span>{{ tutorial.newaddTime }}</span>
      </div>
    </div>
    <div class="msg-text-box">
      <div class="msg-the">
        <div class="ads-le">
          <span>{{ tutorial.tttheme }}</span>
        </div>
      </div>
    </div>
    <div class="text-cont">
      <div class="cont-yq">
        <span>{{ tutorial.tocontent }}</span>
      </div>
    </div>
    <div class="msg-img-box">
      <div class="img_box" v-for='(item,index) in tutorial.imgs' :key='index'>
        <img :src="item" alt="" @click="getImg(tutorial.imgs,index)">
      </div>
    </div>
    <div class="text-read">
      <span>阅读 {{ tutorial.browse }}</span>
    </div>
    <div class="text-pl">
      <div class="pl-box" v-for="(item,index) of pllist" :key="index">
        <div class="pl-le">
          <img :src="item.user.uportrait" alt="">
        </div>
        <div class="pl-rg">
          <div class="rg-uname">
            <span>{{ item.user.username }}</span>
          </div>
          <div class="rg-pltext">
            <span>{{ item.commenttext }}</span>
          </div>
          <div class="rg-pltime">
            <span>{{ item.newaddTime }}</span>
            <i class="iconfont icon-dianzan1"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="foot-tit">
    <van-search
      left-icon=""
      v-model="pltext"
      show-action
      placeholder="写评论"
      @search="onSearch"
      shape="round"
    >
      <template #action>
        <van-button
          round
          @click="onSearch"
          color="#ec8d55"
          size="small">发送
        </van-button>
      </template>
    </van-search>
  </div>
  <div class="jcide-foot" v-show="orther">
    <div class="foot-box" :class="check ? 'active' : ''" @click="dianzan">
      <i class="iconfont icon-dianzan2"></i>
      <span>点赞</span>
    </div>
    <div class="foot-box" :class="checksc ? 'active' : ''" @click="shouchang">
      <i class="iconfont icon-xin"></i>
      <span>收藏</span>
    </div>
    <div class="foot-box">
      <i class="iconfont icon-fenxiang"></i>
      <span>分享</span>
    </div>
  </div>
</div>
</template>

<script>
import {ImagePreview, Toast} from "vant";

export default {
  name: "jcinside",
  data(){
    return{
      pltext: '',
      tutorial: {},
      pllist: [],
      check: false,
      checksc: false,
      orther: true,
    }
  },
  created() {
    console.info(this.$route.params)
    const { tutorial } = this.$route.params
    if(tutorial.thumbs.length > 0){
      const ischeck = tutorial.thumbs.some(r=>{
        return r.uid == localStorage.getItem('uid')
      })
      this.check = ischeck ? true : false
    }
    if(tutorial.collections.length > 0){
      const ischecksc = tutorial.collections.some(r=>{
        return r.uid = localStorage.getItem('uid')
      })
      this.checksc = ischecksc ? true : false
    }
    this.tutorial = tutorial
    this.commentfind(this.tutorial.tutorialid)
    if( tutorial.uid == localStorage.getItem('uid')){
      this.orther = false
    }
  },
  methods:{
    goback(){
      const { active, uinfo } = this.$route.params
      console.info('个人主页',uinfo)
      if(uinfo){
        this.$router.replace({
          name: 'userindex',
          params: {
            active,
            user: uinfo,
          }
        })
      }else
      if(active){
        this.$router.replace({
          name: 'index',
          params: {
            active,
          }
        })
      }else {
        this.$router.go(-1)
      }
    },
    async gouindex(){
      this.$router.replace({
        name: "userindex",
        params: {
          user: this.tutorial.user,
          tutorial: this.tutorial
        }
      })
    },
    async dianzan(){
      if(!this.check){
        try {
          const res = await this.$axios({
            url:'/blog/thumbscreate',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              tutorialid: this.tutorial.tutorialid,
            }
          })
          const {success, msg} = res.data
          if (success){
            console.info(success)
            Toast.success('点赞成功')
            this.check = !this.check
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }else {
        try {
          const res = await this.$axios({
            url:'/blog/thumbsdelete',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              tutorialid: this.tutorial.tutorialid,
            }
          })
          const {success, msg} = res.data
          if (success){
            console.info(success)
            Toast.success('取消成功')
            this.check = !this.check
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }
    },
    async shouchang(){
      if( !this.checksc){
        try {
          const res = await this.$axios({
            url:'/blog/collcetioncreate',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              tutorialid: this.tutorial.tutorialid,
            }
          })
          const {success, msg} = res.data
          if (success){
            Toast.success('收藏成功')
            this.checksc = !this.checksc
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }else {
        try {
          const res = await this.$axios({
            url:'/blog/collcetiondelete',
            method:"post",
            data:{
              uid: parseInt(localStorage.getItem("uid")),
              tutorialid: this.tutorial.tutorialid,
            }
          })
          const {success, msg} = res.data
          if (success){
            console.info(success)
            Toast.success('取消收藏')
            this.checksc = !this.checksc
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      }
    },
    async onSearch(){
      try {
        const res = await this.$axios({
          url:'/blog/commentcreat',
          method:"post",
          data:{
            uid: parseInt(localStorage.getItem("uid")),
            tutorialid: this.tutorial.tutorialid,
            commenttext: this.pltext,
          }
        })
        const {success, msg} = res.data
        if (success){
          Toast.success('评论成功')
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
      this.pltext = '';
      this.commentfind(this.tutorial.tutorialid)
    },
    async commentfind(tutorialid){
      try {
        const res = await this.$axios({
          url:'/blog/commentfind',
          method:"post",
          data:{
            tutorialid,
          }
        })
        const {success, msg, data} = res.data
        if (success){
          console.info(data)
          data.rows.map(r=>{
            const year = new Date(r.commentTime).getFullYear();
            const mouth = `${new Date(r.commentTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.commentTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
          })
          this.pllist = data.rows
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    getImg(images,index){
      ImagePreview({
        images: images,
        showIndex:true,
        loop:false, //是否循环播放
        startPosition:index
      })
    },
  }
}
</script>

<style scoped lang="scss">
.ct-jcinside{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .jcide-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .jcide-msg{
    background-color: #ffffff;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    .msg-img-box{
      img{
        width: 100%;
        padding: 0 vw(20);
        box-sizing: border-box;
        height: vw(400);
        object-fit: cover;
      }
    }
    .msg-user{
      border-top: 1px solid #eeeded;
      width: 100%;
      height: vw(160);
      display: flex;
      padding: 0 vw(20);
      box-sizing: border-box;
      .u-le{
        width: vw(520);
        display: flex;
        align-items: center;
        img{
          width: vw(120);
          height: vw(120);
          border-radius: 50%;
          object-fit: cover;
        }
        .le-rg{
          line-height: vw(50);
          padding-left: vw(30);
          box-sizing: border-box;
          .rg-box{
            span{
              font-weight: bold;
              font-size: vw(27);
            }
            i{
              padding-left: vw(20);
              font-size: vw(27);
              color: lightpink;
            }
          }
          &>span{
            font-size: vw(22);
            color: #a9a8a8;
          }
        }
      }
      .u-rg{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: vw(27);
        color: #a9a8a8;
      }
    }
    .msg-text-box{
      padding: 0 vw(20);
      box-sizing: border-box;
      .msg-the{
        display: flex;
        align-items: center;
        padding: vw(15) 0;
        .ads-le{
          font-size: vw(35);
          font-weight: bold;
          span{
            padding-left: vw(30);
            border-left: vw(10) solid #ec6874;
          }
        }
      }
    }
    .text-cont{
      padding-left: vw(60);
      padding-bottom: vw(20);
      .cont-yq{
        font-size: vw(30);
        color: #4c4c4c;
      }
    }
    .text-read{
      padding-left: vw(20);
      font-size: vw(20);
      color: #8e8e8e;
    }
    .text-pl{
      width: 100%;
      margin-top: vw(15);
      padding: 0 vw(20);
      box-sizing: border-box;
      background-color: #ffffff;
      padding-bottom: vw(20);
      .pl-box{
        padding-top: vw(20);
        display: flex;
        .pl-le{
          width: vw(100);
          img{
            width: vw(80);
            height: vw(80);
            border-radius: 50%;
            object-fit: cover;
          }
        }
        .pl-rg{
          flex: 1;
          .rg-uname{
            font-size: vw(28);
            color: #636363;
          }
          .rg-pltext{
            font-size: vw(30);
            line-height: vw(50);
            padding-bottom: vw(10);
          }
          .rg-pltime{
            display: flex;
            font-size: vw(23);
            align-items: center;
            height: vw(60);
            justify-content: space-between;
            border-bottom: 1px solid #e0e0e0;
            span{
              color: #a0a0a0;
            }
            i{
              font-size: vw(32);
              padding-right: vw(30);
            }
          }
        }
      }
    }
  }
  .foot-tit{
    ::v-deep .van-button--small{
      padding: 0 vw(34);
    }
    ::v-deep .van-search{
      padding-bottom: 0;
    }
  }
  .jcide-foot{
    height: vw(90);
    display: flex;
    background-color: #ffffff;
    align-items: center;
    justify-content: space-around;
    .foot-box{
      font-size: vw(30);
      span{
        padding-left: vw(10);
      }
    }
    .active{
      color: lightpink;
    }
  }
}
</style>
